import React from "react"
import { Form, Input, InputNumber, Modal, Radio } from "antd"

import { IEditProps } from "./usePost"

const EditModal: React.FC<IEditProps> = ({
  form,
  setForm,
  modalConfig,
  setModalConfig,
  submitForm
}) => {
  const handleCancel = () => {
    setModalConfig({ ...modalConfig, visible: false })
  }

  const onFinish = () => {
    submitForm(form)
  }

  const onValuesChange = (changedValues) => {
    setForm({ ...form, ...changedValues })
  }

  return (
    <Modal
      title={`${modalConfig.title}角色`}
      visible={modalConfig.visible}
      destroyOnClose
      onCancel={handleCancel}
      width={600}
      okButtonProps={{ htmlType: "submit", form: "editForm" }}
    >
      <Form
        id="editForm"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={form}
        onFinish={onFinish}
        onValuesChange={onValuesChange}
      >
        <Form.Item
          label="岗位名称"
          name="postName"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="岗位编码"
          name="postCode"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="岗位顺序"
          name="postSort"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          label="岗位状态"
          name="status"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Radio.Group>
            <Radio value="1">正常</Radio>
            <Radio value="2">停用</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="备注"
          name="remark"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input.TextArea rows={3} />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default EditModal
